fix(components): ui:grid renders the 2xl breakpoint its columns map accepts - #8435

Fixes #7097

ui:grid renders the 2xl breakpoint its columns map has always accepted.

Re-measured on today's tree — two of the card's numbers no longer hold

The card was written against @objectstack/spec 17.2.0. This repo now pins 17.3.0, and that changes the accept surface it names.

The six-member vocabulary is still real, just no longer spec-side: BreakpointName (packages/types/src/mobile.ts:69), BREAKPOINTS / BREAKPOINT_ORDER (packages/mobile/src/breakpoints.ts, pinned at breakpoints.test.ts:31), and BreakpointColumnMap (packages/layout/src/ResponsiveGrid.tsx:53, re-homed from the retired schema by objectui#7580, maintainer ruling 2026-09-04 option A). So the card's conclusion survives its premise: the vocabulary is six everywhere, and only this consumer stopped at five.

Which layer dropped it — the load-bearing measurement

Both, and that decides the diff. grid.tsx had no 2xl read arm and no GRID_COLS_2XL static class map. Adding the read arm alone would have emitted a class name Tailwind never compiles — v4 finds utilities by scanning source text, so a 2xl:grid-cols- count assembled from a template is not a utility that exists. Green in a unit test, unstyled in the browser.

Measured by compiling packages/components/src/index.css through the package's own pipeline (postcss + @tailwindcss/postcss, the same two lines as packages/components/scripts/build-css.mjs), varying only grid.tsx:

Escape-form note, because it is a trap: Tailwind emits these selectors as .\32 xl\:grid-cols-6, not .2xl\:grid-cols-6 — a CSS identifier cannot start with a digit. Grepping the literal spelling returns zero on a stylesheet that contains all twelve.

The class then survives to the DOM. Emitted className on the rendered div, read through SchemaRenderer:

Not a deliberate five. The escalation fence does not fire: 2xl has a Tailwind equivalent in this setup (default theme, no --breakpoint-* override in any @theme block, so 2xl is 96rem/1536px — the same 1536 BREAKPOINTS['2xl'] carries), and @object-ui/layout's ResponsiveGrid already emits 2xl:grid-cols-* from its own class table. One consumer in this repo shipped the sixth tier; the other did not.

Sibling responsive readers — the triage's "before closing" step

Swept, and there is no second instance. grid.tsx:87 is the only site in packages/** or apps/** that reads .xl off a responsive object. The other two consumers of the vocabulary are keyed by BREAKPOINT_ORDER or by Object.entries, so they carry all six by construction: resolveResponsiveValue / ResponsiveContainer (@object-ui/mobile) and resolveColumnClasses (@object-ui/layout).

What the pin observes, and why that is sound

packages/components/src/__tests__/grid-breakpoint-columns-7097.test.tsx asserts the whole emitted class string, not a parse and not getComputedStyle. happy-dom does not compile Tailwind or evaluate @media (width >= 96rem) as a browser does, so a computed grid-template-columns here would measure the harness. The class string is the renderer's entire output on this path — grid.tsx reads no window, no matchMedia, no ResizeObserver — and one case pins that width-independence explicitly by rendering the same node at innerWidth 375 and 1600 and requiring identical output, rather than being green by accident on happy-dom's default desktop width.

The class reader asserts its element with a message before reading className: a renderer that produced nothing would otherwise throw Cannot read properties of null before any expect ran, and the summary would name a TypeError instead of the node that failed to render (commit 4).

Would an implementation strictly worse than the bug pass it? No. Every case is whole-string equality, so the other five tiers are non-regression assertions of the same file: a change that emits the 2xl class and drops xl reddens, and so does "delete the feature" (no responsive classes at all), which fails all eleven cases.

The case list is derived, not typed out: ALL_BREAKPOINTS is checked against BreakpointName by an _AssertNever alias, so a seventh member of the vocabulary makes this file a compile error instead of silently leaving the new tier untested. That is the durable half of the card, scoped to what still exists — with the spec-side Breakpoint*Map schemas retired, a repo-wide "compare a strict breakpoint map's member set against its renderer's reads" gate has no remaining subject.

Prove the pin can fail — three ablations, restored by state

Each from the committed implementation, with a trap ... EXIT INT TERM and absolute paths; each restore verified by git hash-object equality and an empty git diff HEAD, never by an exit code.

1. Read site. Deleted only the cn() arm, leaving the class map, so the read layer is isolated. HEAD blob 62b735f9c -> on-disk eede06b1c. 4 failed | 7 passed, red rows by name: a fully authored six-breakpoint map emits all six classes, in order · the reported node — { xs: 1, "2xl": 6 } — now emits its 2xl class · a map naming only 2xl emits that tier and no other tier · renders identically at a phone width and at a 2xl desktop width.
2. Class-map layer. Kept the read arm, replaced the twelve literals with a runtime template. On-disk ed665c2e0. The DOM pin goes to 1 failed | 10 passed — it catches this only incidentally, through the out-of-range case, while the compiled stylesheet loses all twelve rules. Stated plainly: the DOM pin alone does not cover the class-map layer for in-range counts. The table above is what covers it, and it is why the diff adds the map rather than a template.
3. Exhaustiveness gate. Dropped '2xl' from ALL_BREAKPOINTS; type-check exits 2 with grid-breakpoint-columns-7097.test.tsx(113,3): error TS2344: Type '"2xl"' does not satisfy the constraint 'never'. The gate's first spelling was inert (const x: Uncovered[] = [] type-checks whether Uncovered is never or '2xl'); commit 2 replaces it and this ablation is what caught that.

Verification

• pnpm --filter @object-ui/components test — Test Files 241 passed (241), Tests 2235 passed (2235).
• pnpm --filter @object-ui/components type-check — exit 0, both programs (tsc --noEmit && tsc -p tsconfig.test.json, so the exhaustiveness gate is covered).
• pnpm --workspace-concurrency=2 --filter '@object-ui/components^...' build — exit 0, run first so type-check reads fresh .d.ts.
• pnpm exec eslint . in packages/components — exit 0, 0 errors. The one warning on grid.tsx is the pre-existing [key: string]: any on the register signature, present at base. The new test file draws none.
• node scripts/check-changeset-presence.mjs — 2 source file(s) of 1 released package(s) changed, and this change declares 1 changeset(s): .changeset/7097-grid-2xl-breakpoint.md.
• node scripts/check-changeset-no-major.mjs — No changeset declares a major bump.
• node scripts/check-governed-queue-guard.mjs --test on the three changed paths — NOT GOVERNED — 3 path(s) checked against 5 governed surface(s); none matched.
• check:control-bytes, check:unreferenced-sources, check:self-import, check:esm-specifiers, check:vi-mock-specifiers — all exit 0.
• check:sdui-registration-pins — exit 0: All 16 registration(s) a sideEffects array promises are present in the built console (518 chunks weighed; the 3 ruled control(s) are in the derived set). It first exited 2 with a prerequisite message (it reads the console bundle at BUNDLE time); pnpm --workspace-concurrency=2 --filter '@object-ui/console...' build — exit 0 — supplied it, so this is measured, not narrowed.

No authored node in any corpus changes: grep -rn '"2xl"' across every JSON/YAML in the tree returns zero hits (control: "type": "grid" hits five catalog files). The fix is additive for future authors and explains why nobody noticed.

Two findings, reported not filed

search_issues returned API rate limit already exceeded for user ID 323634890 on the second query, and the first query's zero-result read has no lit control to certify it, so per the dispatch contract these are reported in full rather than filed unsearched.

1. packages/components/src/index.css scans its own test files into the published stylesheet. Its @source '../src/**/*.{ts,tsx}' carries no exclusion, while the siblings do — packages/plugin-kanban/src/index.css:91-92 has @source not './**/*.test.{ts,tsx}' and @source not './**/__tests__/**', and packages/fields/src/index.css:44 has the first of those. Two consequences. Bloat is the mild one. The sharp one is that a class literal written as a test's expected value compiles a real utility into dist/index.css, so a test can make the production utility it is checking for exist — measured live here: with this PR's pin file on disk and base grid.tsx, the stylesheet contains .\32 xl\:grid-cols-6 and nothing else in the family, sourced entirely from the test's own assertion strings. The table in this PR is honest only because the measurement was re-run with the pin file removed. Fix is two lines copied from the siblings; it changes published bundle contents, so it wants its own PR and changeset.
2. GridSchema.columns accepts any string key, not six. packages/types/src/layout.ts:385 types it number or an open string-keyed record of numbers, mirrored as z.record(z.string(), z.number()). columns: { banana: 3 } type-checks, parses, emits nothing — the same silent-drop shape as this card, one level more general. Narrowing to a partial record keyed by BreakpointName would close it, but that is a narrowing of a published accept surface across @object-ui/types plus its zod mirror and the zod-mirror-parity pin, so it wants a ruling rather than a patch. Related and minor: the GridSchema.columns docblock example still reads { xs: 1, sm: 2, md: 3, lg: 4 }, four of six — illustrative rather than wrong, and it sits under layout-default-jsdoc-7361.test.ts, so it was left alone.

Out of scope, deliberately

The designer's legacy flat channel (smColumns … xlColumns) gains no sixth member. Naming it and declaring a sixth designer input is a product surface decision, and this card is about the columns breakpoint object. A comment at the mobile-first ramp records why xxlCols is absent from that condition, so it does not read as an oversight.

Generated by Claude Code